<template>
  <div>
    <div class="search-bar" style="display: flex;width: 500px;padding-bottom: 10px;">
      <el-input v-model="couName" placeholder="请输入课程名称..." style="width: 250px;margin-right: 10px"></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="addCourse">新增</el-button>
      <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="couId" label="课程号" width="80" align="center"></el-table-column>
      <el-table-column prop="couName" label="课程名称" width="280" align="center"></el-table-column>
      <el-table-column prop="couGrade" label="学分" width="100" align="center"></el-table-column>
      <el-table-column prop="couTime" label="学时" width="180" align="center"></el-table-column>
      <el-table-column prop="major" label="所属专业" width="300" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件，仅当有数据时显示 -->
    <div v-if="total">
      <el-pagination
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          :page-sizes="[6, 10, 15, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 弹窗对话 -->
    <el-dialog title="新增课程" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="newCourseForm" label-width="80px">
        <el-form-item label="课程号">
          <el-input v-model="newCourseForm.couId"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="newCourseForm.couName"></el-input>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="newCourseForm.couGrade"></el-input>
        </el-form-item>
        <el-form-item label="学时">
          <el-input v-model="newCourseForm.couTime"></el-input>
        </el-form-item>
        <el-form-item label="所属专业">
          <el-input v-model="newCourseForm.major"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getCourse, deleteCourse, addCourse, updateCourse } from "@/api/api";

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 5,
      currentPage: 1,
      couName: "",
      dialogVisible: false,
      newCourseForm: {
        couId: '',
        couName: '',
        couGrade: '',
        couTime: '',
        major: '',
      },
    }
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize);
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData(currentPage, this.pageSize, this.couName);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchData(this.currentPage, this.pageSize, this.couName);
    },
    fetchData(page, size, couName = '') {
      const params = {
        page: page,
        pageSize: size,
        couName: couName
      };
      getCourse(params)
          .then(response => {
            if (response.data.code === 1) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
            } else {
              console.error('获取课程数据时出错： ', response.data.msg);
            }
          });
    },
    handleSearch() {
      this.fetchData(this.currentPage, this.pageSize, this.couName);
    },
    addCourse() {
      this.dialogVisible = true;
      this.newCourseForm = {
        couId: '',
        couName: '',
        couGrade: '',
        couTime: '',
        major: '',
      };
    },
    handleDelete(index, row) {
      this.$confirm('确定删除当前课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteCourse(row.couId)
            .then(res => {
              if (res.data.code === 1) {
                this.$message.success('删除成功');
                this.fetchData(this.currentPage, this.pageSize);
              }
            })
      })
    },
    handleSubmit() {
      if (this.newCourseForm.couId) {
        if (this.newCourseForm) {
          updateCourse(this.newCourseForm)
              .then((response) => {
                if (response.data.code === 1) {
                  this.$message.success("更新成功");
                  this.dialogVisible = false;
                  this.fetchData(this.currentPage, this.pageSize);
                }
              })
        }
      } else {
        addCourse(this.newCourseForm)
            .then(res => {
              if (res.data.code === 1) {
                this.$message.success('添加成功');
                this.dialogVisible = false;
                this.fetchData(this.currentPage, this.pageSize);
              }
            })
      }
    },
    handleEdit(index, row) {
      this.newCourseForm = { ...row };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    exportExcel() {
      // 导出 Excel 相关代码
    }
  },
}
</script>

<style scoped>

</style>
